<template>
  <div>
    <h2>父组件</h2>
    <Child :message="parentMessage" @child-event="handleChildEvent" />
    <p>来自子组件的消息：{{ childMessage }}</p>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue';
import Child from './Child.vue';

export default defineComponent({
  components: {
    Child
  },
  setup() {
    const parentMessage = ref('这是来自父组件的消息');
    const childMessage = ref('');

    const handleChildEvent = (msg: string) => {
      childMessage.value = msg;
    };

    return {
      parentMessage,
      childMessage,
      handleChildEvent
    };
  }
});
</script>